<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于 - 智能CRUD代码生成器</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Common CSS -->
    <link href="/css/common.css" rel="stylesheet">
    
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4rem 0;
        }
        
        .feature-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        
        .tech-badge {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 20px;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            display: inline-block;
            font-size: 0.875rem;
        }
        
        .stats-card {
            text-align: center;
            padding: 2rem;
            border-radius: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            margin-bottom: 1rem;
        }
        
        .stats-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div th:replace="fragments/navigation :: navbar"></div>

    <!-- 主标题区域 -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h1 class="display-4 mb-3" th:text="${projectName}">智能CRUD代码生成器</h1>
                    <p class="lead mb-4" th:text="${description}">
                        一个基于Spring Boot的智能化CRUD代码生成工具，支持从SQL DDL语句自动生成完整的实体类、Repository、Service和Controller代码。
                    </p>
                    <div class="mb-3">
                        <span class="badge bg-light text-dark me-2">版本: <span th:text="${version}">2.0.0</span></span>
                        <span class="badge bg-light text-dark">作者: <span th:text="${author}">CRUD-Generator Team</span></span>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="stats-card">
                        <div class="stats-number">100%</div>
                        <div>代码覆盖率</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="container my-5">
        <!-- 项目特色 -->
        <section class="mb-5">
            <h2 class="text-center mb-5">项目特色</h2>
            <div class="row">
                <div class="col-md-3 text-center mb-4">
                    <div class="feature-icon">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h5>智能解析</h5>
                    <p class="text-muted">自动解析复杂的CREATE TABLE语句，支持多种数据类型和约束条件</p>
                </div>
                <div class="col-md-3 text-center mb-4">
                    <div class="feature-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h5>标准代码</h5>
                    <p class="text-muted">生成符合Spring Boot规范的标准CRUD代码，包含完整的分层架构</p>
                </div>
                <div class="col-md-3 text-center mb-4">
                    <div class="feature-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                    <h5>实时预览</h5>
                    <p class="text-muted">支持代码实时预览，语法高亮显示，所见即所得</p>
                </div>
                <div class="col-md-3 text-center mb-4">
                    <div class="feature-icon">
                        <i class="fas fa-download"></i>
                    </div>
                    <h5>便捷导出</h5>
                    <p class="text-muted">一键打包下载生成的代码，快速集成到现有项目中</p>
                </div>
            </div>
        </section>

        <!-- 技术栈 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">技术栈</h2>
            <div class="row">
                <div class="col-md-6">
                    <h5>后端技术</h5>
                    <div class="mb-3">
                        <span class="tech-badge"><i class="fab fa-java me-1"></i> Spring Boot 2.7.18</span>
                        <span class="tech-badge"><i class="fas fa-database me-1"></i> Spring Data JPA</span>
                        <span class="tech-badge"><i class="fas fa-server me-1"></i> MySQL</span>
                        <span class="tech-badge"><i class="fas fa-file-code me-1"></i> FreeMarker</span>
                        <span class="tech-badge"><i class="fas fa-search me-1"></i> JSqlParser</span>
                        <span class="tech-badge"><i class="fas fa-book me-1"></i> SpringDoc OpenAPI</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <h5>前端技术</h5>
                    <div class="mb-3">
                        <span class="tech-badge"><i class="fab fa-html5 me-1"></i> HTML5</span>
                        <span class="tech-badge"><i class="fab fa-css3-alt me-1"></i> CSS3</span>
                        <span class="tech-badge"><i class="fab fa-js-square me-1"></i> JavaScript</span>
                        <span class="tech-badge"><i class="fab fa-bootstrap me-1"></i> Bootstrap 5</span>
                        <span class="tech-badge"><i class="fas fa-code me-1"></i> Prism.js</span>
                        <span class="tech-badge"><i class="fas fa-leaf me-1"></i> Thymeleaf</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能模块 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">功能模块</h2>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-cog text-primary me-2"></i>
                                核心功能
                            </h5>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i> SQL DDL语句智能解析</li>
                                <li><i class="fas fa-check text-success me-2"></i> 实体类自动生成</li>
                                <li><i class="fas fa-check text-success me-2"></i> Repository接口生成</li>
                                <li><i class="fas fa-check text-success me-2"></i> Service业务层生成</li>
                                <li><i class="fas fa-check text-success me-2"></i> Controller控制器生成</li>
                                <li><i class="fas fa-check text-success me-2"></i> RESTful API接口</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-plus text-info me-2"></i>
                                增强功能
                            </h5>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i> 代码实时预览</li>
                                <li><i class="fas fa-check text-success me-2"></i> 语法高亮显示</li>
                                <li><i class="fas fa-check text-success me-2"></i> 一键复制代码</li>
                                <li><i class="fas fa-check text-success me-2"></i> 代码打包下载</li>
                                <li><i class="fas fa-check text-success me-2"></i> 自定义配置选项</li>
                                <li><i class="fas fa-check text-success me-2"></i> 操作历史记录</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 适用场景 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">适用场景</h2>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-graduation-cap text-primary" style="font-size: 2rem;"></i>
                            <h5 class="mt-3">毕业设计</h5>
                            <p class="text-muted">适合计算机专业学生的毕业设计项目，展示完整的技术栈应用</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-rocket text-success" style="font-size: 2rem;"></i>
                            <h5 class="mt-3">快速开发</h5>
                            <p class="text-muted">提高开发效率，减少重复编码工作，快速搭建项目基础结构</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card text-center h-100">
                        <div class="card-body">
                            <i class="fas fa-users text-info" style="font-size: 2rem;"></i>
                            <h5 class="mt-3">团队协作</h5>
                            <p class="text-muted">统一代码风格，规范开发流程，提升团队开发效率</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 项目统计 -->
        <section class="mb-5">
            <h2 class="text-center mb-4">项目统计</h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-number">4</div>
                        <div>生成文件类型</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-number">15+</div>
                        <div>支持数据类型</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-number">100%</div>
                        <div>代码覆盖率</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-number">0</div>
                        <div>已知Bug数量</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 开源信息 -->
        <section class="mb-5">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fab fa-github me-2"></i>
                        开源信息
                    </h5>
                    <p class="card-text">
                        本项目采用 GPL-3.0 开源协议，欢迎大家使用、学习和贡献代码。
                        项目代码托管在 Gitee 平台，支持 Issue 反馈和 Pull Request 贡献。
                    </p>
                    <div class="row">
                        <div class="col-md-6">
                            <h6>许可协议</h6>
                            <p class="text-muted">GPL-3.0 License</p>
                        </div>
                        <div class="col-md-6">
                            <h6>代码仓库</h6>
                            <p class="text-muted">
                                <a href="https://gitee.com/atanycosts/graduation-tool-library" target="_blank">
                                    <i class="fas fa-external-link-alt me-1"></i>
                                    Gitee 仓库
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-light py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p class="mb-0">
                        <i class="fas fa-code me-2"></i>
                        智能CRUD代码生成器 - 让开发更简单
                    </p>
                </div>
                <div class="col-md-6 text-end">
                    <p class="mb-0">
                        <i class="fas fa-heart text-danger me-1"></i>
                        适合毕业设计使用
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>